<template>
  <div class="box1">
    <div class="content">
      <div class="dis">
        <div class="disl">
          <van-checkbox v-model="checked"></van-checkbox>
          <span>Discount stores</span>
        </div>
        <div class="disr">
          <span>进店</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="info" v-for="(good, index) in goods" :key="index">
        <input
          type="checkbox"
          v-model="good.checked"
          class="select"
          @change="backcheck"
        />
        <van-card
          :num="good.num"
          :price="good.price"
          :desc="good.desc"
          :title="good.title"
          :thumb="good.thumb"
          :origin-price="good.originprice"
        />
        <van-stepper v-model="good.num" theme="round" button-size="18" />
      </div>

      <div class="space"></div>
      <div class="all">
        总计{{ totalMoney | showPrice }} = 商品金额{{ totalMoney | showPrice }}
      </div>
      <div class="space"></div>
      <Scargoodsmore />
    </div>
    <div class="bottom">
      <div class="bottoml">
        <input type="checkbox" v-model="allChecked" @change="changeAllCheck" />
        全选
      </div>
      <div class="bottomr">
        <div class="total">
          <h5>总计:{{ totalMoney | showPrice }}({{ allNum }}件)</h5>
          <span>不含运费</span>
        </div>
        <van-button type="danger" @click="payClick">结算</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Scargoodsmore from "./Scargoodsmore";
export default {
  name: "",
  data() {
    return {
      allChecked: false,
      checked: true,
      goods: [
        {
          checked: false,
          num: 1,
          price: 209,
          desc: "颜色：蓝  尺码：S",
          title: "Preppy Elite 刺绣MA-1 棉衣",
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          originprice: 299,
        },
        {
          checked: false,
          num: 1,
          price: 112,
          desc: "颜色：蓝  尺码：S",
          title: "Preppy Elite 刺绣MA-1 棉衣",
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          originprice: 112,
        },
        {
          checked: false,
          num: 1,
          price: 335,
          desc: "颜色：蓝  尺码：M",
          title: "Preppy Elite 刺绣MA-1 棉衣",
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          originprice: 335,
        },
        {
          checked: false,
          num: 1,
          price: 444,
          desc: "颜色：蓝  尺码：S",
          title: "Preppy Elite 刺绣MA-1 棉衣",
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          originprice: 445,
        },
      ],
    };
  },
  components: {
    Scargoodsmore,
  },
  filters: {
    showPrice(price) {
      return "￥" + price.toFixed(2);
    },
  },
  computed: {
    totalMoney() {
      let totalPrice = 0;
      this.goods.forEach((good) => {
        totalPrice += good.checked ? good.price * good.num : 0;
      });
      return totalPrice;
    },
    allNum() {
      let allNum = 0;
      this.goods.forEach((good) => {
        if (good.checked) {
          allNum += good.num;
        }
      });
      return allNum;
    },
  },
  methods: {
    changeAllCheck() {
      this.goods.forEach((good) => {
        good.checked = this.allChecked;
      });
    },
    backcheck() {
      this.allChecked = this.goods.every((good) => good.checked == true);
    },
    payClick(){
      this.$router.push('/FirmOrder')
    }
  },
};
</script>
<style scoped>
.box1 {
  margin-top: 85px;
}
.content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 80px;
}
.dis {
  display: flex;
  padding: 0 5px;
  height: 45px;
  box-sizing: border-box;
  justify-content: space-between;
}
.dis span {
  color: black;
  margin-left: 10px;
  font-size: 12px;
}
.disr,
.disl {
  display: flex;
  align-items: center;
}

.disr span {
  color: #ef8887;
  margin-right: 7px;
}
.van-card {
  /* width: 330px; */
  height: 100px;
  padding: 0 13px;
  box-sizing: border-box;
  padding-right: 10px;
}
.info {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.van-card__price {
  color: red;
  font-size: 14px;
}
.van-card__bottom {
  margin-bottom: 20px;
}
.van-card__title {
  margin-top: 13px;
  margin-bottom: 19px;
}
.space {
  width: 100%;
  height: 16px;
  background-color: #f0f0f0;
}
.all {
  height: 45px;
  padding: 0 13px;
  box-sizing: border-box;
  line-height: 45px;
  align-content: center;
}
.bottom {
  width: 100%;
  height: 60px;
  display: flex;
  padding-left: 13px;
  box-sizing: border-box;
  border-top: 1px solid gray;
  align-items: center;
  background-color: #fefffe;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.total {
  min-width: 180px;
  margin-left: 40px;
  margin-right: 20px;
  text-align: right;
}
.total span {
  color: gray;
  font-size: 14px;
}
.total h5 {
  font-size: 19px;
  color: #bf2c2e;
}
.bottomr {
  display: flex;
}
</style>